<template>
    <div>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card class="box-card">
        <el-button @click="showAddCate()" style="margin-bottom: 10px;" type="primary">添加分类</el-button>
        <tree-grid 
        :selection-type="false" 
        :expand-type="false" 
        show-index 
        border
        index-text="#"
        :show-row-hover="false"
        :data="cateList" 
        :columns="columns">
          <!-- 定义是否有效的模板列插槽 -->
          <template slot="isok" slot-scope="scope">
            <i style="color: red;" v-if="scope.row.cat_deleted" class="el-icon-error"></i>
            <i style="color: green;" v-else class="el-icon-success"></i>
          </template>
          <!-- 定义排序的模板列插槽 -->
          <template slot="order" slot-scope="scope">
            <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </template>
          <!-- 定义操作的模板列插槽 -->
          <template slot="option" slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
          </template>
        </tree-grid>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryData.pagesize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
      <!-- 添加分类对话框 -->
      <el-dialog
        @close="closeAddCate"
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        width="50%">
        <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类：">
            <!-- 
              v-model: 用来指定默认的选中，和选中之后保存的数据
              options：指定要渲染的数据
              props：配置对象
             -->
            <el-cascader
            v-model="selectValue"
            :options="parentCate"
            clearable
            :props="cascaderProps"
            @change="cascaderChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCate()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取商品分类的参数
      queryData: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      // 商品分类总条数
      total: 0,
      // 商品分类数据
      cateList: [],
      // 表格各列的配置
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          // 这是自定义的模板列
          type: 'template',
          // 设置具名插槽的名字
          template: 'isok'
        },
        {
          label: '排序',
          // 这是自定义的模板列
          type: 'template',
          // 设置具名插槽的名字
          template: 'order'
        },
        {
          label: '操作',
          // 这是自定义的模板列
          type: 'template',
          // 设置具名插槽的名字
          template: 'option'
        }
      ],
      // 控制添加分类显示隐藏
      addCateDialogVisible: false,
      // 添加分类的表单数据
      addCateForm: {
        // 分类名称
        cat_name: '',
        // 父id
        cat_pid: 0,
        // 分类等级
        cat_level: 0
      },
      // 添加分类表单的校验规则
      addCateRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max:10, message: '长度在2 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 父级分类数据
      parentCate: [],
      // 级联选择其的配置对象
      cascaderProps: { 
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        checkStrictly: true
      },
      // 级联选择其默认值选中和选中之后保存的数据
      selectValue: []
    }
  },

  async created() {
    this.getCateList()
    // for(var i=0;i<3;i++) {
    //   const { data: res } = await this.$axios.post('categories',{
    //     // 分类名称
    //     cat_name: '测试'+i,
    //     // 父id
    //     cat_pid: 4212,
    //     // 分类等级
    //     cat_level: 1
    //   })
    // }
  },

  methods: {
    // 获取商品参数数据
    async getCateList () {
      const {data: res} = await this.$axios.get('categories',{
        params: this.queryData
      })
      if(res.meta.status !== 200) return this.$message.error('获取数据失败')
      this.total = res.data.total
      this.cateList = res.data.result
    },
    // 选择每页多少条发生变化触发
    handleSizeChange (val) {
      this.queryData.pagesize = val
      this.getCateList()
    },
    // 切换页码的时候触发
    handleCurrentChange (val) {
      this.queryData.pagenum = val 
      this.getCateList()
    },
    // 点击添加分类
    async showAddCate () {
      const { data: res } = await this.$axios.get('categories',{
        params: { type: 2 }
      })
      if(res.meta.status !== 200) return this.$message.error('获取失败呦')
      this.parentCate = res.data
      this.addCateDialogVisible = true
    },
    // 级联选择其发生变化
    cascaderChange () {
      // 重新给pid和level取值
      // 判断有没有选择父分类
      if(this.selectValue.length > 0) {
        // 如果选择父分类，那么父分类id就是selectValue最后一项
        this.addCateForm.cat_pid = this.selectValue[this.selectValue.length-1]
        // 分类等级 等级 selectValue的长度
        this.addCateForm.cat_level = this.selectValue.length
      }else{
        // 如果没选，还取默认值
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
    },
    // 添加分类对话框关闭
    closeAddCate () {
      this.$refs.addCateRef.resetFields()
      this.selectValue = []
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    },
    // 添加分类
    addCate () {
      this.$refs.addCateRef.validate(async flag=>{
        if(!flag) return 
        const { data: res } = await this.$axios.post('categories',this.addCateForm)
        if(res.meta.status !== 201) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.addCateDialogVisible = false 
        this.getCateList()
      })
    }
  }
};
</script>

<style scoped lang='less'>
.el-cascader {
  width: 100%;
}
</style>
